<template>
  <div class="city">
    <top-header :isLeft="true" title="搜索城市"></top-header>
    <div class="search">
      <a-input-search v-model="city_val"/>
    </div>
    <div class="location">
      <location :address="city"></location>
    </div>

    <alphabet @selectCity='selectCity' 
    ref="allcity" 
    :cityInfo="cityInfo" :keys="keys"
    v-if="searchList.length==0" ></alphabet>

    <div class="search_list" v-else>
      <ul>
        <li @click="selectCity(item)" 
        v-for="(item, index) in searchList" :key="index" >
          {{item.name}}
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
import Alphabet from '../components/Alphabet.vue'
import Location from '../components/Location.vue'
import TopHeader from '../components/TopHeader.vue'
export default {
  data() {
    return {
      city_val:"",//搜索框的值
      cityInfo:{},//接口数据
      keys:[],//存储字母表
      allCities:[],//所有城市
      searchList:[],//搜索到的城市
    };
  },
  computed:{
    city(){
      if(JSON.stringify(this.$store.getters.location)!="{}"){
        return (
          this.$store.getters.location.addressComponent.city||
          this.$store.getters.location.addressComponent.province
        );
      }
    },
  },
  components:{TopHeader,Location,Alphabet},
  watch:{
    city_val:function(){
      this.searchCity();
    },
  },
  methods: {
    getCityInfo(){
      this.$http.get("/api/getCities").then(
        (res)=>{
          this.cityInfo=res.data.data.cities;
          //console.log(res);
          //处理key
          this.keys=Object.keys(res.data.data.cities);
          //去除hotcities这个key
          this.keys.pop();
          //排序
          this.keys.sort();

          //初始化better-scroll插件
          this.$nextTick(()=>{
            this.$refs.allcity.initBScroll();
          })

          //存储所有的城市，用来搜索过滤
          this.keys.forEach((key)=>{
            this.cityInfo[key].forEach((city)=>{
              this.allCities.push(city);
            });
          });
        })
        .catch((err)=>{});
    },
    //搜索城市的逻辑
    searchCity(){
      if (this.city_val=="") {
        this.searchList=[];
      }else{
        this.searchList=this.allCities.filter(item=>{
          return item.name.indexOf(this.city_val)!=-1;
        })
      }
    },
    selectCity(item){
      this.$http.get('/api/getStore',{
        params:{
          area_code:item.area_code,
        },
      })
      .then(
        (res)=>{
          this.$router.push({name:'StoreInfo',query:{
            store:res.data.data.stores
          }})
        },
        (err)=>{}
      )
    }
  },
  created() {
    this.getCityInfo();
  },

};

</script>
<style lang="scss" scoped>
.city {
  width: 100%;
  height: 100%;
  .search,
  .location {
    width: 100%;
    background: $module-color;
    padding: $common-padding;
  }
  .search {
    padding-bottom: 0px;
  }
  .ant-input {
    padding-top: 0px $common-padding;
  }

  .search_list {
    background: $module-color;
    padding: 5px $common-padding;

    li {
      padding: 10px;
      border-bottom: 1px solid #eee;
    }
  }
}
</style>